<template>
  <div class="button-group">
    <el-button
      v-for="(button, index) in buttonList"
      :key="index"
      :class="{
        gbutton: true,
        [button.type]: true,
        active: $route.path === button.path,
      }"
      @click="button.onClick"
    >
      <i v-if="button.icon" class="elbutton_icon">
        <component :is="getIconComponent(button.icon)" class="button_icon" />
      </i>
      {{ button.label }}
    </el-button>
  </div>
</template>

<script setup>
import { defineProps } from "vue";
import * as ElementPlusIconsVue from "@element-plus/icons-vue";
// import IconRecycleBin from "@/assets/customIcon/IconRecycleBin.vue";
const customIcons = import.meta.glob("@/assets/customIcon/*.vue", {
  eager: true,
});
// console.log(customIcons);
const customIconsComponent = Object.fromEntries(
  Object.entries(customIcons).map(([path, component]) => {
    const iconName = path.match(/\/customIcon\/(.+)\.vue$/)[1];
    return [iconName, component];
  })
);
// console.log(customIconsComponent);

// 定义 props
const props = defineProps({
  buttonList: {
    type: Array,
    required: true,
    default: () => [], // 默认值为空数组
  },
});
const IconComponents = {
  ...ElementPlusIconsVue,
  ...customIconsComponent,
};
// console.log(IconComponents);

const getIconComponent = (iconName) => {
  // 处理 Element Plus 的图标命名转换
  if (iconName.startsWith("el-icon-")) {
    // 转换 el-icon-edit 为 Edit
    const componentName = iconName
      .replace("el-icon-", "")
      .split("-")
      .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
      .join("");
    return IconComponents[componentName];
  }
  // console.log(IconComponents[iconName]);
  // 直接返回图标组件
  return IconComponents[iconName]?.default;
};
</script>

<style scoped lang="scss">
.button-group {
  display: flex;
  flex-direction: column; /* 垂直排列按钮 */
  gap: 15px; /* 按钮之间的间距 */
  height: 100%;
  overflow: auto;
}
// .el-button:hover{
//   background-color: inherit;
//   border: inherit;
//   color: inherit;
// }
.gbutton {
  justify-content: start;
  border-radius: 10px;
  & + & {
    margin-left: 0;
  }
  &.b1 {
    background-color: #979797;
    color: #000;
    margin-bottom: 10px;
  }
  &.active {
    background-color: #6c8099;
    // border-color: var(--el-button-hover-border-color);
    border: none;
    color: #fff;
    outline: none;
    svg {
      fill: #fff;
    }
  }
}
.elbutton_icon {
  width: var(--el-font-size-base);
  margin: 0 5px;

  // .button_icon {
  //   width: 100%;
  //   height: 100%;
    svg {
      width: 100%;
      height: 100%;
      fill: currentcolor;
    }
  // }
}
</style>
